<template>
 <div class="kui-content-wrap">
    <div class="kui-wrap-desk kui-flex kui-flex-between kui-flex-middle">
      <Breadcrumb class="kui-desk-nav">
        <BreadcrumbItem to="/">我的工作台</BreadcrumbItem>
        <BreadcrumbItem>订单管理</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div class="kui-wrap-body">
      <div class="kui-body-section">
        <div class="kui-section-item">
          <div class="kui-item-bd kui-table-panel">
            <div class="kui-table-sc">
              <Form class="kui-form-panel" ref="searchForm" inline :v-model="searchVal">
                <FormItem>
                  <Input v-model="searchVal.customer" clearable placeholder="请输入客户名"/>
                </FormItem>
                <FormItem>
                  <Input v-model="searchVal.order" clearable placeholder="请输入订单编号"/>
                </FormItem>
                <FormItem>
                  <DatePicker v-model="searchVal.start" clearable type="date" placeholder="下单开始时间" style="width: 160px"></DatePicker>
                </FormItem>
                <FormItem>
                  <DatePicker v-model="searchVal.end" clearable type="date" placeholder="下单结束时间" style="width: 160px"></DatePicker>
                </FormItem>
                <FormItem>
                  <Select v-model="searchVal.state" clearable style="width:160px" placeholder="请选择订单状态">
                    <Option :value="1">已付清</Option>
                    <Option :value="2">未付清</Option>
                    <Option :value="3">已完成</Option>
                  </Select>
                </FormItem>
                <FormItem>
                  <Select v-model="searchVal.mode" clearable style="width:160px" placeholder="请选择综合状态">
                    <Option :value="1">预定中</Option>
                    <Option :value="2">进行中</Option>
                    <Option :value="3">待付款</Option>
                    <Option :value="4">将到期</Option>
                    <Option :value="5">已逾期</Option>
                  </Select>
                </FormItem>
                <FormItem v-if=" this.$store.state.userInfo.rid === 1 ">
                  <Input v-model="searchVal.author" clearable placeholder="请输入下单者"/>
                </FormItem>
                <FormItem>
                  <Button @click="searchFun" icon="ios-search">搜索</Button>
                </FormItem>
                <FormItem>
                  <Button @click="searchReset">重置</Button>
                </FormItem>
              </Form>
            </div>
            <Table class="kui-table-bd"
                   border
                   :columns="adminTitle"
                   :data="adminData"
                   v-if="this.$store.state.userInfo.rid === 1 ">
                   </Table>

            <Table class="kui-table-bd"
                   border
                   :columns="userTitle"
                   :data="userData"
                   v-else>
                   </Table>
            <div class="kui-table-ft" v-if="adminTotal">
              <Page class="kui-page-current"
                    :total="adminTotal"
                    :page-size="20"
                    size="small"
                    @on-change="clickPages">
              </Page>
            </div>
            <div class="kui-table-ft" v-if="userTotal">
              <Page class="kui-page-current"
                    :total="userTotal"
                    :page-size="20"
                    size="small"
                    @on-change="clickPages">
              </Page>
            </div>
          </div>
        </div>
      </div>
    </div>
 </div>
</template>

<script>
export default {
  data() {
    return {
      //管理员数据
      adminData: [],
      adminTotal: null,
      adminTitle: [
        {
          title: '订单编号',
          width: 240,
          key: 'no',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '下单时间',
          width: 180,
          key: 'created_at',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '客户名称',
          width: 150,
          key: 'customer_name',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '订单价格',
          key: 'price',
          width: 120,
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '付款方式',
          width: 140,
          key: 'paymode',
          align: 'center',
          ellipsis: 'true',
          render: (h, params) => {
            if( params.row.paymode === 1 ) {
               return h('Tag', '一次付款')
            }else if( params.row.paymode === 2 ) {
               return h('Tag', '分期付款')
            }
          }
        },
        {
          title: '订单状态',
          width: 100,
          key: 'state',
          align: 'center',
          ellipsis: 'true',
          render: (h, params) => {
            if( params.row.state === 1 ) {
              return h('Tag', '已付清')
            }else if( params.row.state === 2 ) {
               return h('Tag', '未付清')
            }else if( params.row.state === 3 ) {
               return h('Tag', '已完成')
            }
          }
        },
        {
          title: '下单者名字',
          width: 140,
          key: 'author_name',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '备注信息',
          key: 'info',
          align: 'center',
          ellipsis: 'true'
        },

        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 160,
          fixed: 'right',
          align: 'center',
          render: (h, parent) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '12px'
                  },
                  on: {
                    click: () => {
                      this.jumpBtn(parent.row.id)
                    }
                  }
                },
                '查看'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.orderDate(parent.row.id)
                    }
                  }
                },
                '位置'
              )
            ])
          }
        }
      ],
      //用户数据
      userData: [],
      userTotal: null,
      userTitle: [
        {
          title: '订单编号',
          width: 240,
          key: 'no',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '下单时间',
          width: 180,
          key: 'created_at',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '客户名称',
          width: 150,
          key: 'customer_name',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '订单价格',
          key: 'price',
          width: 100,
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '付款方式',
          width: 100,
          key: 'paymode',
          align: 'center',
          ellipsis: 'true',
          render: (h, params) => {
            if( params.row.paymode === 1 ) {
               return h('Tag', '一次付')
            }else if( params.row.paymode === 2 ) {
               return h('Tag', '分期付')
            }
          }
        },
        {
          title: '订单状态',
          width: 100,
          key: 'state',
          align: 'center',
          ellipsis: 'true',
          render: (h, params) => {
            if( params.row.state === 1 ) {
              return h('Tag', '已付清')
            }else if( params.row.state === 2 ) {
               return h('Tag', '未付清')
            }else if( params.row.state === 3 ) {
               return h('Tag', '已完成')
            }
          }
        },
        {
          title: '备注信息',
          key: 'info',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 160,
          align: 'center',
          render: (h, parent) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '12px'
                  },
                  on: {
                    click: () => {
                      this.jumpBtn(parent.row.id)
                    }
                  }
                },
                '查看'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.orderDate(parent.row.id)
                    }
                  }
                },
                '位置'
              )
            ])
          }
        }
      ],
      selectedArr: [],
      temporaryData: {}, //修改数据临时存放
      searchVal: {},  //搜索临时存放
      boardId: [], //展位id
      state: false
    }
  },
  methods: {
    //获取数据
    async getData(page) {
      const app = this
      if(app.$store.state.userInfo.rid === 1){
        // 管理员数据
        let { data } = await app.$axios.get('/master/v1/order',{
          params: {
            page,
            mode: this.$route.query.mode
          }
        })
        // 清除路由传参
        this.$router.push({go:'/order'})
        if (data.code === 100) {
          app.adminData = data.result.data
          app.adminTotal = data.result.total
        }
      } else {
        // 用户数据
        let { data } = await app.$axios.get('/user/v1/order',{
          params: {
            page,
            mode: this.$route.query.mode
          }
        })
        // 清除路由传参
        this.$router.push({go:'/order'})
        if (data.code === 100) {
          app.userData = data.result.data
          app.userTotal = data.result.total
        }
      }
    },
    //获取订单数据
    async orderDate(id) {
      const app = this
        let { data } = await app.$axios.get(`/user/v1/order/${id}`)
        if( data.code === 100 ) {
          app.boardId = data.result.board.map(item => {
            return item.id
          })
        }
        let idString = app.boardId.join(',')//转为字符串
        sessionStorage.idArr = idString //存到本地
        this.$router.push({
          path:'/map'
        })
    },
    //搜索数据
    async searchData(page) {
      const app = this
      if(app.$store.state.userInfo.rid === 1){
        // 管理员数据
        let { data } = await app.$axios.get('/master/v1/order', {
          params: {
            page,
            ...app.searchVal
          }
        })
        if (data.code === 100) {
          app.adminData = data.result.data
          app.adminTotal = data.result.total
        } else {
          app.$Message.error(data.msg)
        }
      }else {
        // 用户数据
        let { data } = await app.$axios.get('/user/v1/order', {
          params: {
            page,
            ...app.searchVal
          }
        })
        if (data.code === 100) {
          app.userData = data.result.data
          app.userTotal = data.result.total
        } else {
          app.$Message.error(data.msg)
        }
      }

    },
    // 清除搜索
    searchReset() {
      this.state = false
      this.searchVal = {}
      this.getData(1)
    },

    //翻页操作
    clickPages(page) {
      this.state ? this.searchData(page) : this.getData(page)
    },
    // 路由跳转
    jumpBtn(id) {
      this.$router.push({
          path:'/order/info',
          query: {
            id: id
          }
        })
    },
    //搜索操作
    searchFun() {
      this.searchData(1)
      this.state = true
    }
  },
  created() {
    this.getData(1)

  }
}
</script>

<style lang="less" scoped></style>
